<template>
	<div class="tempalte1-private-chat-wrap" :class="{'active':private,'face-active':$parent.emojiShow}">
		<div class="bg-cover" style="background-color: rgba(0, 0, 0, 0.4)" @click="close"></div>
		<div class="tempalte1-private-chat-list">
			<div class="tempalte1-private-chat-select-wrap border-1px" :class="{'active':privateListShow}">
				<div class="tempalte1-private-chat-select-inner-wrap" @click="showList">
					对<div class="tempalte1-private-chat-select">
						<span v-if="selectedItem" class="ell" style="display: inline-block;max-width: 10rem;">{{selectedItem.appdata.nickname}}</span>
						<i class="select-icon" :class="{'active':privateListShow}"></i></div>说:
				</div>
			</div>
			<div class="tempalte1-private-chat-inner-list" :class="{'active':privateListShow}">
				<ul v-if="privateChatArray.length>0">
					<li class="tempalte1-private-chat-li border-1px" v-for="(item,index) in privateChatArray" :key="index" @click="selectDetail(item)">
						<a href="javascript:;" class="tempalte1-private-chat-a" :class="{'active':selectedItem.uid == item.uid}" v-if="selectedItem">
							<div class="private-metainfo-left userrand fl ell" style="max-width: 17.5rem;">
								<i v-if="item.level === 500" class="teacher"></i>
								<i v-else-if="item.level === 900" class="admin"></i>
								<i v-else-if="item.level === 2000" class="shi"></i>
								<i v-else-if="item.level === 4000" class="tuan"></i>
								<i v-else-if="item.appdata.title <= 12" :class="'rank'+item.appdata.title"></i>
								<i v-else-if="item.appdata.title > 12" class="rank12"></i>
								{{item.appdata.nickname}}
							</div>
							<div class="fr private-icon" :class="{'has-new-message':item.messageFlag}"></div>
						</a>
					</li>
				</ul>
				<div style="padding-top: 5px;color: #666;text-align: center;" v-else>暂无可私聊人员~</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import SmartScroll from '@/utils/SmartScroll'
	export default{
		name:'template1PrivateChat',
		computed:{
			...mapGetters([
				'privateChatArray',
				'token',
				'roompara'
			])
		},
		props:{
			private:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				privateListShow:true,
				selectedItem:null,
				checkLevelFlag:false
			}
		},
		methods:{
			showList(){
				this.privateListShow = !this.privateListShow
			},
			close(){
				this.$emit('close', false)
			},
			selectDetail(item){
				this.selectedItem = item
				this.privateListShow = false
				item.messageFlag = false
				const newMessageArr = this.privateChatArray.filter(item => item.messageFlag === true)
				this.$emit("choose-item",{item,newMessageArr})
			}
		},
		mounted(){
			new SmartScroll(document.querySelector('.tempalte1-private-chat-wrap'),document.querySelector('.tempalte1-private-chat-inner-list'))
		},
		watch:{
			privateChatArray(val){
				if(val.length > 0 && !this.selectedItem){
					this.selectedItem = val[0]
					this.$emit("choose-item",{item:this.selectedItem,newMessageArr:[]})
				}else if(val.length  === 0){
					this.selectedItem = null
					this.$emit("choose-item",{item:this.selectedItem,newMessageArr:[]})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tempalte1-private-chat-wrap.face-active{
		bottom:252px;
	}
	.tempalte1-private-chat-wrap{
		position: fixed;
		top:0;
		bottom:52px;
		left:0;
		right:0;
		z-index: 20;
		visibility: hidden;
		transition:visibility .15s,bottom .25s;
		.bg-cover{
			opacity: 0.4;
		}
		.tempalte1-private-chat-list{
			position: absolute;
			left:0;
			right:0;
			bottom: 0;
			background-color: #fff;
			opacity: 1;
			transition: transform .25s,opacity .25s;
			.tempalte1-private-chat-select-wrap.active::before{
				display: block;
			}
			.tempalte1-private-chat-select-wrap{
				height: 50px;
				overflow: hidden;
				@include  border-1px;
				&::before{
					display: none;
				}
				.tempalte1-private-chat-select-inner-wrap{
					margin: 8px 0 0 23px;
					.tempalte1-private-chat-select{
						position: relative;
						display: inline-block;
						width: 13.75rem;
						height: 34px;
						margin: 0 10px;
						padding-left: 1.43rem;
						line-height: 34px;
						box-sizing: border-box;
						border: 1px solid #dfdfdf;
						border-radius: 1.12rem;
						vertical-align: middle;
						.select-icon{
							position: absolute;
							width: 19px;
							height: 11px;
							top:0;
							bottom: 0;
							right: 16px;
							margin: auto;
							transition: transform .25s;
							background: url(../../../../../assets/images/choose-line-down-icon.png) no-repeat;
							background-size:contain;
							transform: rotate(180deg);
						}
						.select-icon.active{
							transform: rotate(0deg);
						}
					}
				}
			}
			.tempalte1-private-chat-inner-list{
				margin: 0 18px;
				height: 0px;
				overflow-y:auto ;
				-webkit-overflow-scrolling:touch ;
				transition: height .1s;
				 font-size: 14px;
				.tempalte1-private-chat-li{
					height: 48px;
					line-height: 48px;
					@include border-1px;
					a{
						position: relative;
						display: block;
						height: 100%;
					}
					a.active{
						color:#4360F0 ;
					}
					.private-icon{
						position: absolute;
						top:0;
						bottom: 0;
						right: 0;
						margin: auto;
						width: 39px;
						height: 18px;
						background: url(../../../../../assets/images/private-icon.png) no-repeat;
						background-size:contain;
					}
				}
			}
			.tempalte1-private-chat-inner-list.active{
				height: 260px;
			}
		}
	}
	.tempalte1-private-chat-wrap.active{
		visibility: visible;
		transition: none;
	}
</style>
<style>
	.private-icon.has-new-message::after{
		content: '';
		position: absolute;
		width:8px;
		height: 8px;
		border-radius: 50%;
		background-color: red;
		right:0;
		top:-2px;
	}
</style>
